<template>
    <div>
        <!-- 搜索 -->
        <el-form :model="formItem"  label-width="80px" :inline="true" class="demo-form-inline">
            <el-form-item label="状态">
                <el-select v-model="formItem.status" placeholder="请选择">
                    <el-option label="排队中" value="1"></el-option>
                    <el-option label="处理中" value="2"></el-option>
                    <el-option label="处理完成" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
            </el-form-item>
        </el-form>
        <div style="margin-bottom: 10px;">
            <el-button @click.native="deleteAll()" type="danger" size="small" >删除</el-button>
            <el-button @click.native="handretrun()" type="primary" size="small">返回</el-button>
        </div>
        <el-table ref="selection" :data="listData" border tooltip-effect="dark" style="width: 100%" @selection-change="select">
            <el-table-column fixed type="selection" width="55"></el-table-column>
            <el-table-column prop="lot" label="导入标识" width="200"></el-table-column>
            <el-table-column prop="excel_name" label="excel名称"></el-table-column>
            <el-table-column prop="status" label="处理状态">
                <template  slot-scope="scope">
                    <span v-if="scope.row.status == 1" style="color: red">排队中</span>
                    <span v-else-if="scope.row.status == 2" style="color: orange">处理中</span>
                    <span v-else="" style="color: green">处理完成</span>
                </template>
            </el-table-column>
            <el-table-column prop="finish_time" label="完成时间"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template slot-scope="scope">
                    <el-button @click.native.prevent="showError(scope.$index)" type="primary" size="mini">查看日志</el-button>
                    <el-button @click.native.prevent="del(scope.$index)" type="danger" size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="text-align : right; float : right; margin-top: 10px;">
            <!--<span class="demonstration">完整功能</span>-->
            <el-pagination
                    @size-change="handlePageSize"
                    @current-change="handlePage"
                    :current-page="pageNum"
                    :page-sizes="[10, 50, 100, 200]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageTotal">
            </el-pagination>
        </div>
        <!-- 错误日志显示 -->
        <el-dialog :visible.sync="errorLogModal" title="错误日志显示" width="80%">
            <div style="margin-bottom: 10px;">
                <el-button @click.native="exports()" type="primary" size="small" >导出</el-button>
            </div>
            <el-table ref="selection" :data="ErrorLogData" border tooltip-effect="dark" style="width: 100%" @selection-change="select">
                <el-table-column fixed type="selection" width="55"></el-table-column>
                <el-table-column prop="lot" label="导入标识" width="200"></el-table-column>
                <el-table-column prop="msg" label="错误备注"></el-table-column>
                <el-table-column prop="status" label="名称">
                    <template  slot-scope="scope">
                        {{scope.row.excel_data ? scope.row.excel_data[0] : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="finish_time" label="手机">
                    <template  slot-scope="scope">
                        {{scope.row.excel_data ? scope.row.excel_data[1] : ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="finish_time" label="工会服务卡号">
                    <template  slot-scope="scope">
                        {{scope.row.excel_data ? scope.row.excel_data[2] : ''}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="text-align : right; float : right; margin-bottom: 15px;">
                <!--<span class="demonstration">完整功能</span>-->
                <el-pagination
                        @size-change="handlePageSize"
                        @current-change="handlePage"
                        :current-page="pageNum"
                        :page-sizes="[10, 50, 100, 200]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="pageTotal">
                </el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "@/axios";
    import { isIntNum,getHeaders } from "@/assets/js/common";
    export default {
        name: "index",
        data() {
            return {
                base: {},
                formItem: {
                    status:""
                },
                listData: [],
                ids:[],
                errorLogModal:false,
                pageTotal: 0,
                pageNum: 1,
                pageSize: 10,
                exportLot: "",
                ErrorLogData: []
            }
        },
        mounted() {
            this.base = JSON.parse(sessionStorage.base);
            this.getList();
        },
        methods: {
            //获取勾选参数
            select(val) {
                let vm = this;
                vm.ids = [];
                for (let i in val) {
                    vm.ids.push(val[i].uuid);
                }
            },
            // 批量删除
            deleteAll() {
                let vm = this;
                if (vm.ids.length < 1) {
                    vm.$message.error("请勾选数据！");
                    return false;
                }
                this.$confirm("是否确认删除吗？", "确认删除" , {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios
                        .post("/admin/member/importRecordDelete", {
                            ids: vm.ids
                        })
                        .then(response => {
                            let status = response.status;
                            let data = response.data;
                            if (data.code == 200) {
                                vm.$message({
                                    type: 'success',
                                    content: "操作成功!",
                                    onClose: function(msg) {
                                        vm.getList();
                                        vm.ids = [];
                                    }
                                });
                            } else {
                                vm.$message.error(data.message);
                            }
                        })
                        .catch(error => {
                            //vm.$Message.info("网络或服务器异常");
                        });
                }).catch(() => {
                    vm.ids = [];
                    this.$refs.selection.selectAll(false);
                });
            },
            //当前页数
            handlePage(value) {
                this.pageNum = value;
                this.getList();
            },
            //每页显示条数
            handlePageSize(value) {
                this.pageSize = value;
                this.getList();
            },
            //搜索
            searchSubmit() {
                this.pageNum = 1;
                this.getList();
            },
            //获取列表
            getList() {
                let vm = this;
                axios
                    .post("/admin/member/showData", {
                        page: this.pageNum,
                        limit: this.pageSize,
                        status: this.formItem.status
                    })
                    .then(response => {
                        let status = response.status;
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.pageTotal = result.total;
                            vm.listData = result.list;
                        } else {
                            vm.$message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            //删除
            del: function (index = "") {
                let vm = this;
                //判断单条多条操作
                vm.ids = [];
                if (!isIntNum(index)) {
                    vm.ids.push(vm.listData[index].uuid);
                } else {
                    if (vm.ids.length < 1) {
                        vm.$message.error("请勾选数据！");
                        return false;
                    }
                }
                this.$confirm("是否确认删除吗？", "确认删除" , {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios
                        .post("/admin/member/importRecordDelete", {
                            ids: vm.ids
                        })
                        .then(response => {
                            let status = response.status;
                            let data = response.data;
                            if (data.code == 200) {
                                vm.$message({
                                    type: 'success',
                                    message: "操作成功!",
                                    onClose: function (msg) {
                                        vm.getList();
                                        vm.ids = [];
                                    }
                                });
                            } else {
                                vm.$message.error(data.message);
                            }
                        })
                        .catch(error => {
                            //vm.$Message.info("网络或服务器异常");
                        });
                }).catch(() => {
                    vm.ids = [];
                    this.$refs.selection.selectAll(false);
                });
            },
            //返回上一页
            handretrun() {
                this.$router.go(-1);
            },
            // 错误日志
            showError (index) {
                let vm = this;
                vm.errorLogModal = true;
                vm.exportLot = this.listData[index].lot;
                axios
                    .post("/admin/member/showErrorLog", {
                        page: this.pageNum,
                        limit: this.pageSize,
                        lot: this.listData[index].lot
                    })
                    .then(response => {
                        let data = response.data;
                        if (data.code == 200) {
                            let result = data.data;
                            vm.pageTotal = result.total;
                            vm.ErrorLogData = result.list;
                        } else {
                            vm.$Message.info(data.message);
                        }
                    })
                    .catch(error => {
                        // vm.$Message.info("网络或服务器异常");
                    });
            },
            // 团队人员框取消
            errorLogCancel() {
                this.errorLogModal = false;
            },
            errorLogOk(){
                this.errorLogModal = false;
            },
            // 导出
            exports() {
                let vm = this;
                let http_url = vm.base.domain_name + '/admin/member/showErrorLogExport';
                let params = '?page='+vm.pageNum+"&limit="+vm.pageSize+"&exportLot="+vm.exportLot;
                window.open(http_url+params,"_blank");
            },
        }
    }
</script>

<style scoped>

</style>